﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
    <link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
    <link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
    <link href="stable/static/css/api.css" rel="stylesheet" type="text/css">
    <title>浏览器按钮 - chrome插件中文开发文档(非官方)</title>
</head>
<body>
    <a id="top"></a>
    <div id="header">{Header content}</div>
    <a id="gc-topnav-anchor"></a>
    <div id="gc-topnav">
      <h1>chrome插件中文开发文档(非官方)</h1>
      <ul id="home" class="gc-topnav-tabs">
        <li id="home_link">
          <a href="index.html" title="Google Chrome Extensions home page"><div>主页</div></a>
        </li>
        <li id="docs_link">
          <a href="docs.html" title="Official Google Chrome Extensions documentation"><div>文档</div></a>
        </li>
        <li id="faq_link">
          <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>常见问题</div></a>
        </li>
        <li id="samples_link">
          <a href="samples.html" title="Sample Extensions (with source code)"><div>示例</div></a>
        </li>
        <li id="group_link">
          <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>google群组(英文)</div></a>
        </li>
        <li id="so_link">
          <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>还有问题?(英文)</div></a>
        </li>
      </ul>
    </div>
    <div id="gc-container">
        <div id="gc-sidebar">
            <ul
                class="level1 ">
                <li class="level2">
                    <a href="getstarted.html" class="level2 ">入门</a>
                </li>
                <li class="level2">
                    <a href="overview.html" class="level2 ">概述</a>
                </li>
                <li class="level2">
                    <a href="whats_new.html" class="level2 ">新功能</a>
                </li>
                <li class="level2">
                    <a href="devguide.html" class="level2 ">开发者指南</a>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">用户界面</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="browserAction.html" class="level4 ">浏览器按钮</a>
                                </li>
                                <li class="level4">
                                    <a href="contextMenus.html" class="level4 ">右键菜单</a>
                                </li>
                                <li class="level4">
                                    <a href="notifications.html" class="level4 ">桌面通知</a>
                                </li>
                                <li class="level4">
                                    <a href="omnibox.html" class="level4 ">多功能地址栏</a>
                                </li>
                                <li class="level4">
                                    <a href="options.html" class="level4 ">选项页面</a>
                                </li>
                                <li class="level4">
                                    <a href="override.html" class="level4 ">代替页面</a>
                                </li>
                                <li class="level4">
                                    <a href="pageAction.html" class="level4 ">页面按钮</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">浏览器交互</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="bookmarks.html" class="level4 ">书签</a>
                                </li>
                                <li class="level4">
                                    <a href="cookies.html" class="level4 ">Cookies</a>
                                </li>
                                <li class="level4">
                                    <a href="devtools.html" class="level4 ">开发人员工具</a>
                                </li>
                                <li class="level4">
                                    <a href="events.html" class="level4 ">事件</a>
                                </li>
                                <li class="level4">
                                    <a href="history.html" class="level4 ">历史记录</a>
                                </li>
                                <li class="level4">
                                    <a href="management.html" class="level4 ">管理</a>
                                </li>
                                <li class="level4">
                                    <a href="tabs.html" class="level4 ">标签页</a>
                                </li>
                                <li class="level4">
                                    <a href="windows.html" class="level4 ">窗口</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">实现</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="a11y.html" class="level4 ">辅助功能</a>
                                </li>
                                <li class="level4">
                                    <a href="event_pages.html" class="level4 ">事件页面</a>
                                </li>
                                <li class="level4">
                                    <a href="contentSecurityPolicy.html" class="level4 ">内容安全策略(CSP)</a>
                                </li>
                                <li class="level4">
                                    <a href="content_scripts.html" class="level4 ">内容脚本</a>
                                </li>
                                <li class="level4">
                                    <a href="xhr.html" class="level4 ">跨站XMLHttpRequest</a>
                                </li>
                                <li class="level4">
                                    <a href="i18n.html" class="level4 ">国际化</a>
                                </li>
                                <li class="level4">
                                    <a href="messaging.html" class="level4 ">消息传递</a>
                                </li>
                                <li class="level4">
                                    <a href="permissions.html" class="level4 ">可选权限</a>
                                </li>
                                <li class="level4">
                                    <a href="npapi.html" class="level4 ">NPAPI插件</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">完成</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="hosting.html" class="level4 ">托管</a>
                                </li>
                                <li class="level4">
                                    <a href="external_extensions.html" class="level4 ">其他部署方案</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="level2">
                    <a href="tutorials.html" class="level2 ">教程</a>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a href="tut_migration_to_manifest_v2.html" class="level3 ">清单文件V2</a>
                        </li>
                        <li class="level3">
                            <a href="tut_debugging.html" class="level3 ">调试</a>
                        </li>
                        <li class="level3">
                            <a href="tut_analytics.html" class="level3 ">Google Analytics(分析)</a>
                        </li>
                        <li class="level3">
                            <a href="tut_oauth.html" class="level3 ">OAuth</a>
                        </li>
                    </ul>
                </li>
                <li class="level2">
                    <span class="level2">参考</span>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">格式</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="manifest.html" class="level4 ">清单文件</a>
                                </li>
                                <li class="level4">
                                    <a href="match_patterns.html" class="level4 ">匹配表达式</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a href="permission_warnings.html" class="level3 ">权限警告</a>
                        </li>
                        <li class="level3">
                            <a href="api_index.html" class="level3 ">chrome.* APIs</a>
                        </li>
                        <li class="level3">
                            <a href="api_other.html" class="level3 ">其他APIs</a>
                        </li>
                    </ul>
                </li>
                <li class="level2">
                    <span class="level2">更多</span>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">chrome商店</a>
                        </li>
                        <li class="level3">
                            <a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">托管应用程序</a>
                        </li>
                        <li class="level3">
                            <a href="themes.html" class="level3 ">主题</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="gc-pagecontent">
            <h1 class="page_title">浏览器按钮(chrome.browserAction)</h1>



            <div id="toc">
                <h2>内容</h2>
                <ol>
                    <li>
                        <a href="#manifest">清单文件</a>
                    </li>
                    <li>
                        <a href="#ui">用户界面的一部分</a>
                        <ol>
                            <li><a href="#icon">图标</a></li>
                            <li><a href="#tooltip">工具提示</a></li>
                            <li><a href="#badge">文字</a></li>
                            <li><a href="#popups">弹出菜单</a></li>
                        </ol>
                    </li>
                    <li>
                        <a href="#tips">提示</a>
                    </li>
                    <li>
                        <a href="#examples">例子 </a>
                    </li>
                    <li>
                        <a href="#apiReference">API参考: chrome.browserAction</a>
                        <ol>
                            <li><a href="#types">类型</a><ol>
                                <li><a href="#type-ColorArray">ColorArray</a>  </li>
                                <li><a href="#type-ImageDataType">ImageDataType</a>  </li>
                            </ol>
                            </li>

                            <li><a href="#methods">方法</a><ol>
                                <li><a href="#method-setTitle">setTitle</a></li>
                                <li><a href="#method-getTitle">getTitle</a></li>
                                <li><a href="#method-setIcon">setIcon</a></li>
                                <li><a href="#method-setPopup">setPopup</a></li>
                                <li><a href="#method-getPopup">getPopup</a></li>
                                <li><a href="#method-setBadgeText">setBadgeText</a></li>
                                <li><a href="#method-getBadgeText">getBadgeText</a></li>
                                <li><a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor</a></li>
                                <li><a href="#method-getBadgeBackgroundColor">getBadgeBackgroundColor</a></li>
                                <li><a href="#method-enable">enable</a></li>
                                <li><a href="#method-disable">disable</a></li>
                            </ol>
                            </li>
                            <li><a href="#events">事件</a><ol>
                                <li><a href="#event-onClicked">onClicked</a></li>
                            </ol>
                            </li>
                            <li><a href="#samples">示例</a></li>
                        </ol>
                    </li>
                </ol>
            </div>

            <p>
                使用浏览器按钮可以在Google Chrome浏览器主窗口中地址栏右侧的工具栏中添加图标。
 除了<a href="#icon">图标</a>,
  浏览器按钮还可以有<a href="#tooltip">提示</a>,
 
                <a href="#badge">文字[badge]</a>,
  和<a href="#popups">弹出菜单</a>.
 
            </p>

            <p>
                在下面的图中，地址栏右侧多种颜色的正方形是一个浏览器按钮的图标，图标下有一弹出菜单。
            </p>

            <img src="stable/static/images/browser-action.png"
                width="363" height="226" />

            <p>
                如果您想创建一个不是永远可见的图标，改用<a href="pageAction.html">页面按钮</a>。
            </p>

            <h2 id="manifest">清单文件</h2>

            <p>
                在
                <a href="manifest.html">扩展程序的清单文件</a>
                中像这样注册您的浏览器按钮：
            </p>

            <pre>{
  "name": "My extension",
  ...
  <b>"browser_action": {
    "default_icon": {                    <em>// 可选</em>
      "19": "images/icon19.png",           <em>// 可选</em>
      "38": "images/icon38.png"            <em>// 可选</em>
    },
    "default_title": "Google Mail",      <em>// 可选; 在工具提示中显示</em>
    "default_popup": "popup.html"        <em>// 可选</em>
  }</b>,
  ...
}</pre>

            <p>
                如果您只提供19px或38px图标大小中的一个，扩展程序系统将会缩放您提供的图标，以适应用户显示器的像素密度，这有可能会丢失细节或是它看上去很模糊。注册默认图标的旧语法仍然支持：
            </p>

            <pre>{
  "name": "My extension",
  ...
  <b>"browser_action": {
    ...
    "default_icon": "images/icon19.png"  <em>// 可选</em>
    <em>// 与 "default_icon": { "19": "images/icon19.png" } 等价</em>
  }</b>,
  ...
}</pre>

            <h2 id="ui">用户界面的一部分</h2>

            <p>
                浏览器按钮可以包含<a href="#icon">图标</a>,
                <a href="#tooltip">工具提示</a>,
                <a href="#badge">文字</a>,
和<a href="#popups">弹出菜单</a>。
            </p>

            <h3 id="icon">图标</h3>

            <p>浏览器按钮图标的宽度和高度最大可以为19 dip（设备无关像素），更大的图标会被缩小。为了最佳结果，请使用19 dip大小的正方形图标。</p>

            <p>
                您可以通过两种方式设置图标：使用静态图像或者使用HTML5 
 
                <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">canvas 元素</a>。
 对于简单的应用来说，使用静态图像更方便，但是您可以使用canvas元素创建动态的用户界面，例如平滑的动画。
 
            </p>

            <p>
                静态图像可以是WebKit可以显示的任何格式，包括BMP、GIF、ICO、JPEG或PNG。
 
            </p>

            <p>
                要设置图标，使用<a href="#manifest">清单文件</a>中
   
                <b>default_icon</b>和<b>browser_action</b>
                属性, 
  或者调用<a href="#method-setIcon">setIcon()</a>方法。
 
            </p>

            <p>
                要在屏幕像素密度（比值
 
                <code>size_in_pixel / size_in_dip</code>)不为1的时候正确显示图标，图标可以定义为一组不同大小的图片。实际显示的图片将从这一组图标中选取，以便最佳匹配19 dip图标的像素大小。目前一组图标可以包含像素大小为19和38的图片。
 
            </p>

            <h3 id="tooltip">工具提示</h3>

            <p>
                要设置工具提示，使用<a href="#manifest">清单文件</a>中
   
                <b>default_title</b>和<b>browser_action</b>
                属性,
或者调用<a href="#method-setTitle">setTitle()</a> 方法。
对于<b>default_title</b>属性
，您可以制定区域相关的字符串，有关更多细节请参考<a href="i18n.html">国际化</a>支持。
            </p>

            <h3 id="badge">文字</h3>

            <p>
                浏览器图标可以选择在图标上显示一小段<em>文字</em> &mdash;
文字使得更新浏览器按钮更容易，来显示有关扩展程序状态的一点点信息。
            </p>

            <p>
                因为文字所拥有的空间有限，它不应超过四个字符。
 
            </p>

            <p>
                分别调用
                <a href="#method-setBadgeText">setBadgeText()</a>和
                <a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor()</a>,
设置文字的内容和颜色。

            </p>


            <h3 id="popups">弹出菜单</h3>

            <p>
                如果浏览器按钮有弹出菜单，当用户单击图标时弹出菜单。弹出菜单可以包含任何你需要的HTML内容，并且自动调整大小以适应内容。
 
            </p>

            <p>
                要向您的浏览器按钮添加弹出菜单，创建一个HTML文件存放弹出菜单的内容。
在<a href="#manifest">清单文件</a>
                中<b>browser_action</b>部分的<b>default_popup</b>属性指定该HTML文件
或者调用<a href="#method-setPopup">setPopup()</a> 方法。
            </p>

            <h2 id="tips">提示</h2>

            <p>为了最好的视觉效果，遵循下面的指导：</p>

            <ul>
                <li>
                对于适用于大多数页面的功能使用浏览器按钮。
 
                <li>对于仅适用于少数页面的内容不要使用浏览器按钮，而应该使用<a href="pageAction.html">页面按钮</a>。
 
                <li>
                尽可能使用较大的、颜色丰富的图标充分利用19×19像素的空间。浏览器按钮的图标应该看上去比页面按钮的图标更大一些、更明显一些。
 
                <li>
                不要尝试模仿Google Chrome浏览器的单色“扳手”图标。这样与主题背景不协调，并且无论如何，扩展程序应该更加突出一点。
 
                <li>
                务必使用透明是您的图标边框更加平滑。因为很多人使用主题背景，您的图标应该在各种背景颜色下看着舒服。
 
                <li>
                不要总是使用动画图标，那样只会显得很烦人。
            </ul>

            <h2 id="examples">例子</h2>

            <p>
                您可以在
                <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/">examples/api/browserAction</a>
                目录中找到使用浏览器按钮的简单例子。有关其它示例和查看源代码的帮助，请参见
                <a href="samples.html">示例</a>。
            </p>
            <h2 id="apiReference">API参考: chrome.browserAction</h2>
            <div class="api_reference">
                <h3 id="types">类型</h3>
                <div>
                    <h3 id="type-ColorArray">ColorArray</h3>
                    <div>
                        <dt><span class="type_name">(    <span id="typeTemplate">array of integer</span>  )</span></dt>
                    </div>
                </div>
                <div>
                    <h3 id="type-ImageDataType">ImageDataType</h3>
                    <div>
                        <dt><span class="type_name">(    <span id="typeTemplate">imagedata</span>  )</span></dt>
                        <dd>图片的像素数据，必须为ImageData对象（例如来自<code>canvas</code>元素）。
                  </dd>
                    </div>
                </div>
                <h3 id="methods">方法</h3>
                <div>
                    <h4 id="method-setTitle">setTitle</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.setTitle</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            设置浏览器图标的标题，显示在工具提示中。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-setTitle-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-title"></a>
                                            <dt><span class="variable">title</span>          <span class="property">(                            <span id="typeTemplate">string</span>            )          </span></dt>
                                            <dd>当鼠标移到浏览器按钮上时应显示的字符串。        </dd>
                                        </div>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>当选中某一特定标签页时，将更改限制在该标签页内。当该标签页关闭时，更改的内容自动恢复。     </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>

                    </div>
                </div>
                <div>
                    <h4 id="method-getTitle">getTitle</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.getTitle</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            获取浏览器按钮的标题。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-getTitle-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>指定要获取标题的标签页。如果没有指定标签页，则返回用于所有标签页的标题。        </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>
                        <h4>回调函数</h4>
                        <p><em>callback</em>参数应该指定一个如下形式的函数：</p>
                        <pre>function(string result) <span class="subdued">{...}</span>;</pre>
                        <dl>
                            <div><a name="property-callback-result"></a>
                                <dt><span class="variable">result</span>    <span class="property">(                <span id="typeTemplate">string</span>      )    </span></dt>
                            </div>
                        </dl>
                    </div>
                </div>
                <div>
                    <h4 id="method-setIcon">setIcon</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.setIcon</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            设置浏览器按钮的图标。图标既可以指定为图片文件的路径，也可以指定来自canvas元素的像素数据，或者这两者中任意一个的词典。<b>path</b>或<b>imageData</b>属性中有且只有一个必须指定。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-setIcon-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-imageData"></a>
                                            <dt><span class="variable">imageData</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate"><a href="browserAction.html#type-ImageDataType">ImageDataType</a> or object</span>            )          </span></dt>
                                            <dd>ImageData对象或一个词典（大小 -> ImageData），表示要设置的图标。如果图标以词典的形式指定，实际使用的图标取决于屏幕的像素密度。如果单位屏幕空间容纳的图片的像素数等于<code>scale</code>，则会选择大小为<code>scale</code> * 19的图片。目前只支持缩放比例1和2。至少要指定一个图片。注意details.imageData = foo等价于details.imageData = {'19': foo}。</dd>
                                        </div>
                                        <div><a name="property-details-path"></a>
                                            <dt><span class="variable">path</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">string or object</span>            )          </span></dt>
                                            <dd>图片的相对路径或一个词典（大小 -> 图片的相对路径），指向要设置的图标。如果图标以词典的形式指定，实际使用的图标取决于屏幕的像素密度。如果单位屏幕空间容纳的图片的像素数等于<code>scale</code>，则会选择大小为<code>scale</code> * 19的图片。目前只支持缩放比例1和2。至少要指定一个图片。注意details.path = foo等价于details.path = {'19': foo}。</dd>
                                        </div>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>当选中某一特定标签页时，将更改限制在该标签页内。当该标签页关闭时，更改的内容自动恢复。 </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>
                        <h4>回调函数</h4>
                        <p>如果您指定了<em>callback</em>参数，它应该指定一个如下形式的函数：</p>
                        <pre>function() <span class="subdued">{...}</span>;</pre>
                        <dl></dl>
                    </div>
                </div>
                <div>
                    <h4 id="method-setPopup">setPopup</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.setPopup</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            设置当用户单击浏览器按钮时显示为弹出菜单的HTML文档。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-setPopup-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>当选中某一特定标签页时，将更改限制在该标签页内。当该标签页关闭时，更改的内容自动恢复。 </dd>
                                        </div>
                                        <div><a name="property-details-popup"></a>
                                            <dt><span class="variable">popup</span>          <span class="property">(                            <span id="typeTemplate">string</span>            )          </span></dt>
                                            <dd>显示在弹出菜单中的HTML文件。如果设置为空字符串（""）则不弹出菜单     </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>

                    </div>
                </div>
                <div>
                    <h4 id="method-getPopup">getPopup</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.getPopup</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            获取设置为浏览器按钮弹出内容的HTML文档。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-getPopup-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>指定要获取弹出内容的标签页。如果没有指定标签页，则返回用于所有标签页的弹出内容。    </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>
                        <h4>回调函数</h4>
                        <p><em>callback</em>参数应该指定一个如下形式的函数：</p>
                        <pre>function(string result) <span class="subdued">{...}</span>;</pre>
                        <dl>
                            <div><a name="property-callback-result"></a>
                                <dt><span class="variable">result</span>    <span class="property">(                <span id="typeTemplate">string</span>      )    </span></dt>
                            </div>
                        </dl>
                    </div>
                </div>
                <div>
                    <h4 id="method-setBadgeText">setBadgeText</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.setBadgeText</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            设置浏览器按钮上的文字，显示在图标上。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-setBadgeText-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-text"></a>
                                            <dt><span class="variable">text</span>          <span class="property">(                            <span id="typeTemplate">string</span>            )          </span></dt>
                                            <dd>可以传入任意数目的字符，但是只有四个左右能够显示得下。        </dd>
                                        </div>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>当选中某一特定标签页时，将更改限制在该标签页内。当该标签页关闭时，更改的内容自动恢复。        </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>

                    </div>
                </div>
                <div>
                    <h4 id="method-getBadgeText">getBadgeText</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.getBadgeText</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                          获取浏览器按钮上的文字，如果没有指定标签页，则返回用于所有标签页的文字。

                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-getBadgeText-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>指定要获取文字的标签页。如果没有指定标签页，则返回用于所有标签页的文字。</dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>
                        <h4>回调函数</h4>
                        <p><em>callback</em>参数应该指定一个如下形式的函数：</p>
                        <pre>function(string result) <span class="subdued">{...}</span>;</pre>
                        <dl>
                            <div><a name="property-callback-result"></a>
                                <dt><span class="variable">result</span>    <span class="property">(                <span id="typeTemplate">string</span>      )    </span></dt>
                            </div>
                        </dl>
                    </div>
                </div>
                <div>
                    <h4 id="method-setBadgeBackgroundColor">setBadgeBackgroundColor</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.setBadgeBackgroundColor</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            设置文字的背景颜色。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-setBadgeBackgroundColor-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-color"></a>
                                            <dt><span class="variable">color</span>          <span class="property">(                            <span id="typeTemplate"><a href="browserAction.html#type-ColorArray">ColorArray</a> or string</span>            )          </span></dt>
                                            <dd>含有四个在[0,255]范围内的整数的数组，组成文字的RGBA颜色。例如，不透明的红色是<code>[255, 0, 0, 255]</code>。 。也可以为CSS形式的字符串，例如不透明的红色为<code>#FF0000</code> 或 <code>#F00</code>.        </dd>
                                        </div>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>当选中某一特定标签页时，将更改限制在该标签页内。当该标签页关闭时，更改的内容自动恢复。  </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>

                    </div>
                </div>
                <div>
                    <h4 id="method-getBadgeBackgroundColor">getBadgeBackgroundColor</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.getBadgeBackgroundColor</span>(<span>object <span class="variable">details</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            获取浏览器按钮上的文字背景颜色
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-getBadgeBackgroundColor-details"></a>
                                <dt><span class="variable">details</span>    <span class="property">(                <span id="typeTemplate">object</span>      )    </span></dt>
                                <dd>
                                    <dl>
                                        <div><a name="property-details-tabId"></a>
                                            <dt><span class="variable">tabId</span>          <span class="property">(              <span class="optional">optional</span>              <span id="typeTemplate">integer</span>            )          </span></dt>
                                            <dd>指定要获取文字背景颜色的标签页。如果没有指定标签页，则返回用于所有标签页的文字背景颜色。        </dd>
                                        </div>
                                    </dl>
                                </dd>
                            </div>
                        </dl>
                        <h4>回调函数</h4>
                        <p><em>callback</em>参数应该指定一个如下形式的函数：</p>
                        <pre>function(<a href="browserAction.html#type-ColorArray">ColorArray</a> result) <span class="subdued">{...}</span>;</pre>
                        <dl>
                            <div><a name="property-callback-result"></a>
                                <dt><span class="variable">result</span>    <span class="property">(                <span id="typeTemplate"><a href="browserAction.html#type-ColorArray">ColorArray</a></span>      )    </span></dt>
                            </div>
                        </dl>
                    </div>
                </div>
                <div>
                    <h4 id="method-enable">enable</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.enable</span>(<span class="optional">integer <span class="variable">tabId</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            为某一标签页启用浏览器按钮。默认情况下，浏览器按钮是启用的。
                 
                        </p>
                        <h4>参数</h4>
                        <dl>
                            <div><a name="property-enable-tabId"></a>
                                <dt><span class="variable">tabId</span>    <span class="property">(        <span class="optional">optional</span>        <span id="typeTemplate">integer</span>      )    </span></dt>
                                <dd>您希望修改浏览器按钮的标签页标识符。  </dd>
                            </div>
                        </dl>

                    </div>
                </div>
                <div>
                    <h4 id="method-disable">disable</h4>
                    <div class="summary lower">
                        <span>chrome.browserAction.disable</span>(<span class="optional">integer <span class="variable">tabId</span></span>)
               
                    </div>
                    <div class="description">
                        <p>
                            为某一标签页禁用浏览器按钮。
                 
                        </p>
                        <h4>Parameters</h4>
                        <dl>
                            <div><a name="property-disable-tabId"></a>
                                <dt><span class="variable">tabId</span>    <span class="property">(        <span class="optional">optional</span>        <span id="typeTemplate">integer</span>      )    </span></dt>
                                <dd>您希望修改浏览器按钮的标签页标识符。  </dd>
                            </div>
                        </dl>

                    </div>
                </div>
                <h3 id="events">事件</h3>
                <div>
                    <h4 id="event-onClicked">onClicked</h4>
                    <div class="summary">
                        <span class="subdued">chrome.browserAction.</span>onClicked<span class="subdued">.addListener</span>(function(<span><a href="tabs.html#type-Tab">tabs.Tab</a> <span class="variable">tab</span></span>)<span class="subdued"> {...}</span>);
               
                    </div>
                    <div class="description">
                        <p>
                            单击浏览器按钮时发生。如果浏览器按钮有弹出菜单则不会触发该事件。
                        </p>
                        <h4>监听参数</h4>
                        <dl>
                            <div><a name="property-onClicked-tab"></a>
                                <dt><span class="variable">tab</span>    <span class="property">(                <span id="typeTemplate"><a href="tabs.html#type-Tab">tabs.Tab</a></span>      )    </span></dt>
                            </div>
                        </dl>
                    </div>
                </div>
            </div>
            <h2 id="samples">一些使用chrome.browserAction的示例</h2>
            <li><strong><a href="samples.html#cb771f28a910d79a2fcfeb1c5be6983b">A browser action with no icon that makes the page red</a></strong> &ndash;
        </li>
            <li><strong><a href="samples.html#db80e292b687541c7aa5e89cee75ad79">Print this page</a></strong> &ndash;
            Adds a print button to the browser.
        </li>
            <li><strong><a href="samples.html#932e16ad4805a5820c9b7dc6b1cb03ab">A browser action which changes its icon when clicked.</a></strong> &ndash;
        </li>
            <li><strong><a href="samples.html#2b0f7d02f3ebd51358ed54ef59dceebb">Cookie API Test Extension</a></strong> &ndash;
            Testing Cookie API
        </li>
            <li><strong><a href="samples.html#f447d4d0c667a4f72ef8c6190e7925d7">Live HTTP headers</a></strong> &ndash;
            Displays the live log with the http requests headers
        </li>
            <li><strong><a href="samples.html#812b7fe611113aedf0a394e9fbbfcce1">JavaScript pause/resume</a></strong> &ndash;
            Pauses / resumes JavaScript execution
        </li>
            <li><strong><a href="samples.html#d5d930bdcf3f5e1753d0de5924a89a65">Event Page Example</a></strong> &ndash;
            Demonstrates usage and features of the event page
        </li>
            <li><strong><a href="samples.html#87fc6fd215630c7d5e7f86be5d6407fd">CLD</a></strong> &ndash;
            Displays the language of a tab
        </li>
            <li><strong><a href="samples.html#b7ee031d2bfdbdd1c89f2cff6ed9781c">Idle - Simple Example</a></strong> &ndash;
            Demonstrates the Idle API
        </li>
            <li><strong><a href="samples.html#00294fafee1df479cc20247741f44447">Speech Recognizer</a></strong> &ndash;
            Recognizes your speech and tells you the most likely result.
        </li>
            <li><strong><a href="samples.html#062d24295dce5def19f91da9c449e1e4">Tab Inspector</a></strong> &ndash;
            Utility for working with the extension tabs api
        </li>
            <li><strong><a href="samples.html#dcc956ee1308eb125ff32bdaad4c1d84">Test Screenshot Extension</a></strong> &ndash;
            Demonstrate screenshot functionality in the chrome.tabs api. Note: only works for code.google.com
        </li>
            <li><strong><a href="samples.html#f92d20e2d53aae42280f27e7dbeb761f">Merge Windows</a></strong> &ndash;
            Merges all of the browser's windows into the current window
        </li>
            <li><strong><a href="samples.html#9fa1c6ac42d625c3f62314548468640c">Chromium Buildbot Monitor</a></strong> &ndash;
            Displays the status of the Chromium buildbot in the toolbar.  Click to see more detailed status in a popup.
        </li>
            <li><strong><a href="samples.html#d85d53e2433c9325f85336791560a68c">Google Calendar Checker (by Google)</a></strong> &ndash;
            Quickly see the time until your next meeting from any of your calendars. Click on the button to be taken to your calendar.
        </li>
            <li><strong><a href="samples.html#4e61966db98ebfc75fa32b5ff2406c6b">Email this page (by Google)</a></strong> &ndash;
            This extension adds an email button to the toolbar which allows you to email the page link using your default mail client or Gmail.
        </li>
            <li><strong><a href="samples.html#5139d19c542e2188a42418c27c9cdd5b">Google Mail Checker</a></strong> &ndash;
            Displays the number of unread messages in your Google Mail inbox. You can also click the button to open your inbox.
        </li>
            <li><strong><a href="samples.html#fd0e71a56fc3e6c5ebe1d5daa3049120">Sample - OAuth Contacts</a></strong> &ndash;
            Uses OAuth to connect to Google's contacts service and display a list of your contacts.
        </li>
            <li><strong><a href="samples.html#bea7f3606e50b59b0f8b08cbab6236da">Proxy Extension API Sample</a></strong> &ndash;
            Set Chrome-specific proxies; a demonstration of Chrome's Proxy API
        </li>
            <li><strong><a href="samples.html#fe3bfa0dd0b9d2a0aab933bd6d3aab88">Speak Selection</a></strong> &ndash;
            Speaks the current selection out loud.
        </li>
            <li><strong><a href="samples.html#bba3c3de3da89e7a53b56bac8a173c3c">Talking Alarm Clock</a></strong> &ndash;
            A clock with two configurable alarms that will play a sound and speak a phrase of your choice.
        </li>
            <li><strong><a href="samples.html#47c541bcb84a8bc242edeb89dc06630e">Sandboxed Frame</a></strong> &ndash;
        </li>
        </div>
    </div>
</body>
<script>
    window.bootstrap = {
        api_names: [{ "name": "alarms" }, { "name": "bookmarks" }, { "name": "browserAction" }, { "name": "browsingData" }, { "name": "commands" }, { "name": "contentSettings" }, { "name": "contextMenus" }, { "name": "cookies" }, { "name": "debugger" }, { "name": "declarativeWebRequest" }, { "name": "devtools.inspectedWindow" }, { "name": "devtools.network" }, { "name": "devtools.panels" }, { "name": "downloads" }, { "name": "events" }, { "name": "extension" }, { "name": "fileBrowserHandler" }, { "name": "fontSettings" }, { "name": "history" }, { "name": "i18n" }, { "name": "idle" }, { "name": "input.ime" }, { "name": "management" }, { "name": "omnibox" }, { "name": "pageAction" }, { "name": "pageCapture" }, { "name": "permissions" }, { "name": "privacy" }, { "name": "proxy" }, { "name": "runtime" }, { "name": "scriptBadge" }, { "name": "storage" }, { "name": "tabs" }, { "name": "topSites" }, { "name": "tts" }, { "name": "ttsEngine" }, { "name": "types" }, { "name": "webNavigation" }, { "name": "webRequest" }, { "name": "webstore" }, { "last": true, "name": "windows" }].concat(
            [{ "name": "experimental.bluetooth" }, { "name": "experimental.devtools.audits" }, { "name": "experimental.devtools.console" }, { "name": "experimental.discovery" }, { "name": "experimental.identity" }, { "name": "experimental.infobars" }, { "name": "experimental.offscreenTabs" }, { "name": "experimental.processes" }, { "name": "experimental.record" }, { "name": "experimental.speechInput" }, { "name": "experimental.systemInfo.cpu" }, { "name": "experimental.systemInfo.storage" }, { "last": true, "name": "experimental.usb" }]),
        branchInfo: { "channels": [{ "path": "stable", "name": "Stable" }, { "path": "dev", "name": "Dev" }, { "path": "beta", "name": "Beta" }, { "path": "trunk", "name": "Trunk" }], "current": "stable", "showWarning": false }
    };
  </script>
<div id="gc-footer">
    <div class="text">
        <p>
            Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
        the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
        Attribution 3.0 License</a>, and code samples are licensed under the
       
            <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
     
        </p>
        <p>
            ©2012 Google
     
        </p>
        <script src="stable/static/js/branch.js" type="text/javascript"></script>
        <script src="stable/static/js/sidebar.js" type="text/javascript"></script>
        <script src="stable/static/js/prettify.js" type="text/javascript"></script>
        <script>
            (function () {
                // Auto syntax highlight all pre tags.
                var preElements = document.getElementsByTagName('pre');
                for (var i = 0; i < preElements.length; i++)
                    preElements[i].classList.add('prettyprint');
                prettyPrint();
            })();
      </script>
        <div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>

    </div>
</div>
</html>
